<template>
  <div>
      <div>
         <img v-bind:src="imgUrl" alt="">
      </div>
      <div>
        <button @click="changePic">换图</button>
      </div>
      <hr>
      <!-- v-bind的简写形式是: -->
      <a :href="networkUrl">{{school}}</a>
      <br>
      <button @click="changeSchool">更换</button>
  </div>
</template>

<script>
export default {
  data(){
    return{
      imgUrl:'https://img1.baidu.com/it/u=3009731526,373851691&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
      networkUrl:'http://www.woniuxy.com',
      school:'蜗牛学苑'
    }
  },
  methods:{
    changePic(){
      this.imgUrl="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2F1114%2F121420113514%2F201214113514-6-1200.jpg&refer=http%3A%2F%2Flmg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671179801&t=595266893ba6bb495fa1d43e213ae8b7"
    },
    changeSchool(){
      this.school='蜗牛学院',
      this.networkUrl="http://old.woniuxy.com"
    }
  }
}
</script>

<style>
  img{
    width: 250px;
  }
</style>